<template>
	<view class="user-info">
		<!-- 头部背景图 -->
		<view class="bg-img">
			<u-image widht="750rpx" height="217rpx" src="@/static/image/home/data_statistics/bg.png"></u-image>
		</view>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="name" :border-bottom="false">
					<!-- 姓名输入框 -->
					<title-tools title="姓名" fontSize="30rpx"></title-tools>
					<view class="input-wrap">
						<u-input type="text" disabled v-model="form.name" :custom-style="customStyle" :clearable="false">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item prop="organization_phone" :border-bottom="false">
					<!-- 联系电话 -->
					<title-tools title="联系电话" fontSize="30rpx"></title-tools>
					<view class="input-wrap">
						<u-input type="text" disabled v-model="form.organization_phone" :custom-style="customStyle" :clearable="false">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item prop="telphone" :border-bottom="false">
					<!-- 办公电话 -->
					<title-tools title="办公电话" fontSize="30rpx"></title-tools>
					<view class="input-wrap">
						<u-input type="text" disabled v-model="form.telphone" :custom-style="customStyle" :clearable="false">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item prop="email" :border-bottom="false">
					<!-- 电子邮箱 -->
					<title-tools title="电子邮箱" fontSize="30rpx"></title-tools>
					<view class="input-wrap">
						<u-input type="text" disabled v-model="form.email" :custom-style="customStyle" :clearable="false">
						</u-input>
					</view>
				</u-form-item>
			</u-form>
			<!-- 所属部门 -->
			<view style="margin-top: 20rpx;">
				<title-tools title="所属部门" :subTitle="userInfo.organization_classify"></title-tools>
			</view>
		</view>
		<!-- <view class="btn">
			<u-button open-type="getUserInfo" @click="submit" :custom-style="btnCustomStyle">确认修改</u-button>
		</view> -->
	</view>
</template>

<script>
	import TitleTools from '../../../components/title-tools/TitleTools.vue'
	import {
		apiGetAdInfo,
		apiSetAd
	} from '@/api/user/user.js'
	export default {
		name: 'UserInfo',
		components: {
			TitleTools
		},
		data() {
			return {
				//输入框样式
				customStyle: {
					marginTop: '20rpx',
					paddingLeft: '20rpx',
					backgroundColor: '#E5E5E5',
					borderRadius: '10rpx'
				},
				//按钮样式
				btnCustomStyle: {
					marginTop: '30rpx',
					color: '#fff',
					backgroundColor: '#196EFF',
					borderRadius: '20rpx'
				},
				//用户认证状态
				status: getApp().globalData.status,
				//用户信息
				userInfo: {},
				//表单数据
				form: {
					name: '',
					organization_phone: '',
					telphone: '',
					email: ''
				},
				//验证规则
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					organization_phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					telphone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onShow() {
			//获取用户信息
			this.getUserInfo().catch(err => {
				console.log(err)
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//提交修改个人信息
			submit() {
				
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const that = this;
						uni.getUserProfile({
							desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
							success: async (res) => {
								that.form.img = res.userInfo.avatarUrl;
								await that.apiSetAd().catch(err => {
									console.log(err)
								})
								uni.showToast({
									title: '修改成功',
									icon: 'success'
								})
								setTimeout(() => {
									that.$Router.back(1);
								},600)
								
							}
						})
						
						// uni.switchTab({
						// 	url: 'pages/user/index'
						// })
					} else {
						console.log('验证失败');
					}
				});


			},
			//获取用户信息
			async getUserInfo() {
				const res = await apiGetAdInfo();
				this.userInfo = res.data;
				// const { name, phone, telphone, email } = this.userInfo;
				this.form = this.userInfo;
			},
			//提交认证信息
			async apiSetAd() {
				const {
					name,
					organization_phone,
					telphone,
					email,
					img
				} = this.form;
				const res = await apiSetAd(name, organization_phone, telphone, email, img);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		padding: 30rpx 20rpx;
	}

	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.content {
		padding: 40rpx 20rpx;
		// height: 862rpx;
		height: calc(100vh - 60rpx);
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	::v-deep .u-form-item__message {
		padding-left: 0 !important;
	}
</style>
